<template>
  <div class="container">
    <iframe
      ref="myFrameRef"
      src="/canvas.html"
      frameborder="0"
      width="100%"
      height="800px"
    >
    </iframe>
  </div>
</template>

<script setup lang="ts">
  import { getFlowRunningSituationByFormId } from '@/api/flow';
  import useLoading from '@/hooks/loading';
  import { nextTick, onMounted, ref } from 'vue';

  const props = defineProps({
    formId: {
      type: String,
      default: '',
    },
    processDefinitionKey: {
      type: String,
      default: '',
    },
  });

  const { setLoading } = useLoading();
  const myFrameRef = ref<any>();
  const fetchData = async () => {
    setLoading(true);
    try {
      const { data } = await getFlowRunningSituationByFormId(props.formId);
      const arr = data.historyActivitys
        .filter((item: any) => {
          item.completed = true;
          return item;
        })
        .concat(
          data.currentActivitys.filter((item: any) => {
            item.completed = false;
            return item;
          })
        );
      const postMsg = {
        xml: data.bpmnXmlString, // Query the xml
        eventData: [],
        historyActivitys: arr,
        type: 'initData',
        isView: true,
      };

      await nextTick(() => {
        console.log('nextTick:', myFrameRef.value.contentWindow);
        myFrameRef.value.contentWindow.onload = () => {
          console.log('contentWindow.onload');
          myFrameRef.value?.contentWindow.postMessage(postMsg, '*');
        };
      });
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  };
  onMounted(() => {
    fetchData();
  });
</script>

<style scoped lang="less"></style>
